<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bokeh Applications</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://fonts.googleapis.com/css?family=Lato|Work+Sans:400,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://bokeh.org/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://bokeh.org/css/main.css" />

  <link rel="apple-touch-icon" sizes="180x180" href="https://static.bokeh.org/favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="https://static.bokeh.org/favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="https://static.bokeh.org/favicon/favicon-16x16.png">
  <link rel="manifest" href="https://static.bokeh.org/favicon/site.webmanifest">
  <link rel="mask-icon" href="https://static.bokeh.org/favicon/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">

  <style type="text/css">
    .demo img { width: 100%; padding-top: 15px; }
    .demo { border: 1px solid #ccc; }
  </style>

</head>
<body>

  <!-- main menu -->
  <div class="container py-3 py-lg-0">
    <nav class="navbar navbar-expand-lg navbar-light bg-light" id="main-menu">

      <a class="navbar-brand" href="https://bokeh.org" id="logo">
        <img src="https://static.bokeh.org/logos/logotype.svg" height="30" width="110" />
      </a>

      <button class="navbar-toggler ml-auto hidden-sm-up float-xs-left" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarContent">
        <ul class="navbar-nav mr-auto">

          <li class="nav-item flex-md-fill text-md-center">
            <a class="nav-link" href="https://docs.bokeh.org/en/latest">Documentation</a>
          </li>

          <li class="nav-item flex-md-fill text-md-center">
            <a class="nav-link" href="https://discourse.bokeh.org">Community</a>
          </li>

          <li class="nav-item flex-md-fill text-md-center">
            <a class="nav-link" href="https://mybinder.org/v2/gh/bokeh/bokeh-notebooks/master?filepath=tutorial%2F00%20-%20Introduction%20and%20Setup.ipynb">Tutorials</a>
          </li>

          <li class="nav-item flex-md-fill text-md-center">
            <a class="nav-link" href="https://demo.bokeh.org">Demos</a>
          </li>

          <li class="nav-item flex-md-fill text-md-center">
            <a class="nav-link" href="https://blog.bokeh.org">Blog</a>
          </li>

          <li class="nav-item flex-md-fill text-md-center">
              <a class="nav-link" href="https://github.com/bokeh/bokeh">GitHub</a>
          </li>

          <li class="nav-item flex-md-fill text-md-center donate">
            <a class="btn btn-primary" href="https://numfocus.org/donate-to-bokeh">Donate</a>
          </li>

        </ul>
      </div>

    </nav>
  </div>
  <!-- end main menu -->


  <div class="container">
    <br />

    <div class="row">
      <div class="col-sm-12">
        <p>
          This site hosts examples of applications built using
          <a target="_blank" href="http://bokeh.org">Bokeh</a>, a library for building data visualizations
          and applications in the browser from <a target="_blank" href="https://www.python.org">Python</a>
          (and other languages), without writing JavaScript.
        </p>
      </div>
    </div>

    <br />

    <div class="row">

      <div class="col-lg-4 col-md-6 demo">
        <a target="_blank" href="movies">
          <img src="https://static.bokeh.org/movies_t.png">
        </a>
        <p>
          An interactive query tool for a set of IMDB data
        </p>
        <p>
          <em>Source code: </em><a target="_blank" href="https://github.com/bokeh/bokeh/blob/master/examples/app/movies">movies</a>
        </p>
        <p>
          Inspired by the <a href="http://shiny.rstudio.com/gallery/movie-explorer.html">Shiny Movie Explorer</a>
        </p>
      </div>

      <div class="col-lg-4 col-md-6 demo">
        <a target="_blank" href="selection_histogram">
          <img src="https://static.bokeh.org/selection_histogram_t.png">
        </a>
        <p>
          Shows axis histograms for selected <em>and</em> non-selected points in a scatter plot
        </p>
        <p>
          <em>Source code: </em><a target="_blank" href="https://github.com/bokeh/bokeh/blob/master/examples/app/selection_histogram.py">selection_histogram</a>
        </p>
      </div>

      <div class="col-lg-4 col-md-6 demo">
        <a target="_blank" href="weather">
          <img src="https://static.bokeh.org/weather_t.png">
        </a>
        <p>
          Interactive weather statistics for three cities.
        </p>
        <p>
          <em>Source code: </em><a target="_blank" href="https://github.com/bokeh/bokeh/tree/master/examples/app/weather">weather</a>
        </p>
      </div>

      <div class="col-lg-4 col-md-6 demo">
        <a target="_blank" href="sliders">
          <img src="https://static.bokeh.org/sliders_t.png"></img>
        </a>
        <p>
          A basic demo that has sliders for controlling a plotted trigonometric function
        </p>
        <p>
          <em>Source code: </em><a target="_blank" href="https://github.com/bokeh/bokeh/blob/master/examples/app/sliders.py">sliders.py</a>
        </p>
      </div>

      <div class="col-lg-4 col-md-6 demo">
        <a target="_blank" href="crossfilter">
          <img src="https://static.bokeh.org/crossfilter_t.png">
        </a>
        <p>
          Explore the "autompg" data set by selecting and highlighting different dimensions
        </p>
        <p>
          <em>Source code: </em><a target="_blank" href="https://github.com/bokeh/bokeh/blob/master/examples/app/crossfilter">crossfilter</a>
        </p>
      </div>

      <div class="col-lg-4 col-md-6 demo">
        <a target="_blank" href="gapminder">
          <img src="https://static.bokeh.org/gapminder_t.png"></img>
        </a>
        <p>
          A reproduction of the famous Gapminder demo, with embedded video added using a custom page template
        </p>
        <p>
          <em>Source code: </em><a target="_blank" href="https://github.com/bokeh/bokeh/blob/master/examples/app/gapminder">gapminder</a>
        </p>
      </div>

      <div class="col-lg-4 col-md-6 demo">
        <a target="_blank" href="stocks">
          <img src="https://static.bokeh.org/stocks_t.png"></img>
        </a>
        <p>
          Linked plots, summary statistics, and correlations for market data
        </p>
        <p>
          <em>Source code: </em><a target="_blank" href="https://github.com/bokeh/bokeh/blob/master/examples/app/stocks">stocks</a>
        </p>
      </div>

      <div class="col-lg-4 col-md-6 demo">
        <a target="_blank" href="export_csv">
          <img src="https://static.bokeh.org/export_csv_t.png">
        </a>
        <p>
          Query a data table and save the results to a CSV file
        </p>
        <p>
          <em>Source code: </em><a target="_blank" href="https://github.com/bokeh/bokeh/blob/master/examples/app/export_csv">export_csv</a>
        </p>
      </div>

      <div class="col-lg-4 col-md-6 demo">
        <a target="_blank" href="surface3d">
          <img src="https://static.bokeh.org/surface3d_t.png"></img>
        </a>
        <p>
          An updating 3d plot that demonstrates using using Bokeh custom extensions to wrap third-party JavaScript libraries
        </p>
        <p>
          <em>Source code: </em><a target="_blank" href="https://github.com/bokeh/bokeh/blob/master/examples/app/surface3d">surface3d</a>
        </p>
      </div>

    </div>

  </div>

  <br />

  <footer class="container-fluid links">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-6 col-sm-4 links-item">
          <h6>Project</h6>
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link" href="https://bokeh.org/roadmap/">Roadmap</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://bokeh.org/team/">Team</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://bokeh.org/citation/">Citation</a>
            </li>
          </ul>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-4 links-item">
          <h6>Documentation</h6>
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link" href="https://docs.bokeh.org/en/latest/docs/user_guide.html">User Guide</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://docs.bokeh.org/en/latest/docs/gallery.html">Gallery</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://docs.bokeh.org/en/latest/docs/reference.html">Reference Guide</a>
            </li>
          </ul>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-4 links-item">
          <h6>Hands On</h6>
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link" href="https://mybinder.org/v2/gh/bokeh/bokeh-notebooks/master?filepath=tutorial%2F00%20-%20Introduction%20and%20Setup.ipynb">Tutorials</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://demo.bokeh.org">Demos</a>
            </li>
          </ul>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-3 links-item">
          <h6>Contribute</h6>
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link" href="https://github.com/bokeh/bokeh">GitHub</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://docs.bokeh.org/en/latest/docs/dev_guide.html">Developer Guide</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://bokeh.org/sponsor/">Sponsor</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <br />
  </footer>

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-127553611-5"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-127553611-5');
  </script>
  <!-- End Google Tag Manager -->

  <footer class="container-fluid footer-copy">
    <div class="container">
      <div class="row">
        <div class="col-md-10 py-2">
          <p>
              Bokeh is a fiscally sponsored project of <a href="https://numfocus.org">NumFOCUS</a>, a nonprofit dedicated to supporting the open-source scientific computing community.
              Donations help pay for cloud hosting costs, travel, and other project needs.
          </p>
          <p>
            ©2019 Bokeh contributors.
            The website content uses the <a href="https://github.com/bokeh/demo.bokeh.org/blob/master/LICENSE.txt">BSD License</a> and is covered by the <a href="https://github.com/bokeh/bokeh/blob/master/CODE_OF_CONDUCT.md">Bokeh Code of Conduct</a>.
          </p>
        </div>
        <br />
        <div class="col-md-2 py-2">
          <a class="btn btn-primary" href="https://numfocus.org/donate-to-bokeh">Donate</a>
        </div>
      </div>
    </div>
  </footer>

  <script src="https://bokeh.org/js/jquery.min.js"></script>
  <script src="https://bokeh.org/js/bootstrap.min.js"></script>

</body>
</html>
